<template>
  <!-- E上传 -->
  <div>
    <div>
      <Modal
        v-model="uploadModalue"
        :title="uploadTitle"
        width="1180"
        @on-cancel="cancel"
        class="Modal-zindex"
      >
        <div class="title-Modal">
          {{ titleTest }}
        </div>
        <div>
          <div class="ModalBox">
            <div class="upload-css">
              <div>
                <div class="title-css">未上传</div>
                <div>
                  <Select
                    placeholder="请选择需要上传的分公司"
                    v-model="carryUserId"
                    style="width: 260px"
                  >
                    <Option
                      v-for="item in uploadList"
                      :value="item.carryUserId"
                      :key="item.carryUserId"
                      >{{ item.companyName }}</Option
                    >
                  </Select>
                  <span class="upload-but-css">
                    <Button
                      type="primary"
                      :loading="uploadBtn"
                      @click="uploadProv"
                      >上传</Button
                    >
                  </span>
                </div>
              </div>
            </div>
            <!-- 线 -->
            <div class="upload-BoxLine"></div>
            <!-- 详情 -->
            <div class="listDriver">
              <div>
                <div class="title-css">已上传</div>
                <div>
                  <Row>
                    <Table
                      :loading="loading"
                      border
                      :columns="columnsUpload"
                      :data="dataTable"
                      ref="table"
                      class="table"
                    >
                    </Table>
                  </Row>
                </div>
              </div>
            </div>
            <div style="margin-top: 10px"></div>
          </div>
        </div>
        <div slot="footer"></div>
      </Modal>
    </div>
  </div>
</template>

<script>
import { getStore, setStore } from "@/libs/storage";
import {
  provincialDriverRoot, // 省厅上传司机
  addDriverUser, // 税务上传司机
  provincialVehicleRoot, //省厅上传车辆
  addVehicleLicense, //税务上传车辆
  bindingVehicle, //ETC
  getCarriageUploadList, //上传列表
  getCarryUserList, //选择公司
} from "@/api/monitoring";
export default {
  data() {
    return {
      loading: false,
      uploadBtn: false,
      uploadModalue: this.uploadModalue, //弹框
      uploadList: [], //上传公司
      dataType: "", //上传类型
      dataId: "", //上传id、
      carryUserId: "", //上传公司id
      header: {
        accessToken: getStore("accessToken"),
      },
      accessToken: getStore("accessToken"),
      dataTable: [],
      columnsUpload: [
        {
          title: "上传时间",
          key: "createTime",
          minWidth: 200,
        },
         {
          title: "更新时间",
          key: "updateTime",
          minWidth: 200,
        },
        {
          title: "上传人",
          key: "createName",
          minWidth: 120,
        },
        {
          title: "公司名称",
          key: "companyName",
          minWidth: 200,
          tooltip: true,
        },
        {
          title: "统一社会信用代码",
          key: "certNo",
          minWidth: 200,
          tooltip: true,
        },
        {
          title: "经营许可证号",
          key: "roadPermitNo",
          minWidth: 200,
        },
      ],
      titleTest: "",
    };
  },
  props: {
    uploadModalue: {
      type: Boolean,
      default: false,
    },
    uploadData: {
      type: Object,
      default: "",
    },
    uploadTitle: {
      type: String,
      default: "",
    },
    uploadType: {
      type: Number,
      default: "",
    },
  },
  watch: {
    uploadModalue(val) {
      this.setCurrentValue(val);
      this.carryUserId = "";
    },
    uploadType(val) {
      if (val) {
        if (val == 1) {
          this.dataType = 2;
        } else if (val == 2) {
          this.dataType = 1;
        } else if (val == 3) {
          this.dataType = 4;
        } else if (val == 4) {
          this.dataType = 3;
        } else {
          this.dataType = val;
        }
        if (val >= 3) {
          this.dataId = this.uploadData.vehicleId;
          this.titleTest =
            " ( " +
            this.uploadData.actualName +
            "  " +
            this.uploadData.vehicleNum +
            " ) ";
        } else {
          this.dataId = this.uploadData.userId;
          this.titleTest =
            " ( " +
            this.uploadData.name +
            "  " +
            this.uploadData.mobile +
            " ) ";
        }
      } else {
        this.dataId = this.uploadData.userId;
        this.titleTest =
          " ( " + this.uploadData.name + "  " + this.uploadData.mobile + " ) ";
      }
    },
    uploadData(val) {
      if (val != "") {
        this.getDataList();
        this.getSelectCompany();
      }
    },
  },
  methods: {
    // 关闭
    cancel() {
      this.uploadModalue = false;
      this.$emit("uploadEnd", this.uploadModalue, 2);
    },
    setCurrentValue(value) {
      if (value === this.uploadModalue) {
        return;
      }
      this.uploadModalue = value;
    },
    // 获取数据
    getDataList() {
      let data = {
        dataType: this.dataType,
        dataId: this.dataId,
      };
      getCarriageUploadList(data).then((res) => {
        if (res.code == 200) {
          if (res.result) {
            this.dataTable = res.result;
          } else {
            this.dataTable = [];
          }
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 选择公司
    getSelectCompany() {
      let data = {
        dataType: this.dataType,
        dataId: this.dataId,
      };
      getCarryUserList(data).then((res) => {
        if (res.code == 200) {
          if (res.result) {
            this.uploadList = res.result;
          } else {
            this.uploadList = [];
          }
        } else {
          this.$Message.error(res.message);
        }
      });
    },
    // 上传
    uploadProv() {
      if (!this.carryUserId) {
        return this.$Message.warning("请选择需要上传的分公司");
      }
      this.uploadBtn = true;
      if (this.uploadType == 1) {
        //  司机省厅上传
        let data = {
          userId: this.uploadData.userId,
          carryUserId: this.carryUserId,
        };
        provincialDriverRoot(data).then((res) => {
          this.carryUserId = "";
          this.loading = false;
          this.uploadBtn = false;
          if (res.code == 200) {
            this.$Message.success("上传成功");
            this.getDataList();
            this.getSelectCompany();
           this.$emit("uploadEnd", this.uploadModalue, 1);
          } else {
            this.$Message.error(res.message);
          }
        });
      } else if (this.uploadType == 2) {
        //  税务上传司机
        let data = {
          userId: this.uploadData.userId,
          carryUserId: this.carryUserId,
        };
        addDriverUser(data).then((res) => {
          this.carryUserId = "";
          this.loading = false;
          this.uploadBtn = false;
          if (res.code == 200) {
            this.$Message.success("上传成功");
            this.getDataList();
            this.getSelectCompany();
             this.$emit("uploadEnd", this.uploadModalue, 1);
          } else {
            this.$Message.error(res.message);
          }
        });
      } else if (this.uploadType == 3) {
        //省厅上传车辆
        let data = {
          vehicleId: this.uploadData.vehicleId,
          carryUserId: this.carryUserId,
        };
        provincialVehicleRoot(data).then((res) => {
          this.carryUserId = "";
          this.loading = false;
          this.uploadBtn = false;
          if (res.code == 200) {
            this.$Message.success("上传成功");
            this.getDataList();
            this.getSelectCompany();
               this.$emit("uploadEnd", this.uploadModalue, 1);
          } else {
            this.$Message.error(res.message);
          }
        });
      } else if (this.uploadType == 4) {
        //   税务上传车辆
        let data = {
          vehicleLicenseId: this.uploadData.vehicleId,
          carryUserId: this.carryUserId,
        };
        addVehicleLicense(data).then((res) => {
          this.carryUserId = "";
          this.loading = false;
          this.uploadBtn = false;
          if (res.code == 200) {
            this.$Message.success("上传成功");
            this.getDataList();
            this.getSelectCompany();
            this.$emit("uploadEnd", this.uploadModalue, 1);
          } else {
            this.$Message.error(res.message);
          }
        });
      } else {
        let data = {
          vehicleId: this.uploadData.vehicleId,
          carryUserId: this.carryUserId,
        };
        bindingVehicle(data).then((res) => {
          this.carryUserId = "";
          this.loading = false;
          this.uploadBtn = false;
          if (res.code == 200) {
            this.$Message.success("上传成功");
            this.getDataList();
            this.getSelectCompany();
            this.$emit("uploadEnd", this.uploadModalue, 1);
          } else {
            this.$Message.error(res.message);
          }
        });
      }
    },
  },
  mounted() {},
  created() {},
};
</script>

<style lang="less">
.listDriver {
  .ivu-list-small .ivu-list-item {
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

.my-content {
  width: 100px;
}
.my-limitation {
  width: 170px;
}
.Line {
  // border-bottom: 1px solid #eee;
  // border-bottom-color: rgb(255, 255, 255);
  border: 0;
  border-top: 1px solid #eee;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgb(238, 238, 238);
  border-bottom: 1px solid #fff;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgb(255, 255, 255);
  margin: 20px 0;
}
.listDriver {
  margin-top: 15px;
  // margin-left: 30px;
  .listDriverspan {
    text-align: right;
    width: 100px;
    color: #999;
  }
  .listDriverval {
    margin-left: 15px;
  }
}
.Owner {
  margin-left: 20px;
  // height: 80px;
  display: flex;
  .Ownerportrait {
    width: 60px;
    height: 60px;
    img {
      margin-top: 20px;
      width: 100%;
      height: 100%;
    }
  }
  .OwnerName {
    margin-left: 17px;
    padding: 25px 0;
    .OwnerName1 {
      margin-left: 10px;
      color: #999999;
    }
    .Owner-company {
      margin-top: 10px;
      cursor: pointer;
    }
  }
}

.ModalBox {
  padding: 0 5px;
  overflow: auto;
  height: 30rem;
  .virewhead {
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid #eee;
    .headPortrait {
      margin-left: 2rem;
      width: 50px;
      height: 50px;
      margin-top: 1rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .headcompany {
      width: 300px;
      font-size: 14px;
      font-weight: normal;
      .headcompanyfont {
        margin-top: 23px;
      }
      .headcRate {
        .ivu-rate-star {
          width: 8px;
          height: 8px;
        }
      }
    }
  }
  .headdetails {
    margin: 10px 0;
  }
}

.upload-BoxLine {
  content: "";
  height: 10px;
  border-bottom: 1px solid #eee;
  margin: 15px 0;
}

.el-descriptions__header {
  margin-bottom: 10px;
}
.Modal-zindex {
  .ivu-modal-wrap,
  .ivu-modal-mask {
    z-index: 2000 !important;
  }
}
.upload-css {
  display: flex;
  justify-content: space-between;
}
.title-css {
  margin-bottom: 8px;
  font-size: 15px;
  color: #17233d;
  font-weight: 600;
}
.table table {
  // table-layout: auto;
  width: 100% !important;
}
.upload-but-css {
  margin-left: 25px;
}
.title-Modal {
  position: absolute;
  top: 12px;
  left: 85px;
  font-size: 16px;
  font-weight: 500;
  color: #778899;
}
</style>
